<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap4.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">		
	</head>
	
	
	
	<body> 
        <div class="card-body">
        	<div>
        		<table >
        			<input type="hidden" id="sid"  class="form-control" name="sid" />
                 <tr>
                 	<td>姓名：</td>
                 	<td><input type="text" id="name"  class="form-control" name="name" style="width: 120px;"/></td>
                 	<td>账号：</td>
                 	<td><input type="text" id="numbers"  class="form-control" name="numbers" style="width: 120px;" placeholder="不能修改账号" /></td>
                 	<td>密码：</td>
                 	<td><input type="password"  class="form-control" id="password" name="password" style="width: 120px;"/></td>
                 	<td>职位：</td>
                 	<td><select style="width: 120px;" id="PostList"  class="form-control">
        					<option value="0">-- 请选择 --</option>
        				</select>
                 	</td>
                 	<td><button onclick="InsStaff()" class="btn btn-default">添加员工</button></td>
                 	<td><button onclick="UpdateStaff()" class="btn btn-default">修改员工</button></td>
                    <td><input type="text" id="getNumbers"  class="form-control" name="getNumbers" style="width: 180px;" oninput="getByidStaff()" placeholder="根据账号查询" /></td>
                    <td><button onclick="getByidStaff()" class="btn btn-success">搜索</button></td>
                 </tr>        			
        		</table>
        		
        		
        		
        	
        	</div>
        	<br />
        	<table id="example2" class="table table-bordered table-hover">
		                <tr>
		                  <th  width="150" >姓名</th>
		                  <th  width="150">账号</th>
		                  <th>密码</th>
		                  <th width="150">职位</th>
		                  <th width="145">操作</th>
		                </tr>
	                <tbody id="UserTable"></tbody>
	                
          	</table>
        </div>
        
		
		
	</body>
	
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- 权限 js -->
<script type="text/javascript" src="../../js/login.js" ></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../../plugins/datatables/jquery.dataTables.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script>
	
var Post = null;
	
 $(function () {
  	//查询所有的角色
    $.ajax({
		type:"post",
		url:"http://127.0.0.1:8075/SelPost",
		xhrFields:{withCredentials: true},
		crossDomain: true,
		dataType:"json",
		success:function(msg){
			Post = msg;
			$.each( msg, function(i, n){
				$("#PostList").append("<option value='"+n.pid+"'>"+n.pname+"</option>");
			});
			
		}})
  	
  	
  	//查询所有的员工信息
    $.ajax({
	type:"post",
	url:"http://127.0.0.1:8075/SelectStaff",
	xhrFields:{withCredentials: true},
	crossDomain: true,
	dataType:"json",
	success:function(msg){
		if(msg==1441){
			alert("权限不足");
		}else{
			$.each( msg, function(i, n){
		        //$("#UserTable").replaceWith("<tbody id='UserTable'></tbody>")       
				$("#UserTable").append("<tr>"+
						                  "<td>"+n.name+"</td>"+
						                  "<td>"+n.numbers+"</td>"+
						                  "<td>"+n.password+"</td>"+
						                  "<td>"+n.pname+"</td>"+
						                  "<td>"+
						                  	"<button class='btn btn-primary' onclick='DelStaff("+n.numbers+")'>删除</button>&nbsp&nbsp"+
						                  	"<button class='btn btn-primary' onclick='UpdStaff("+n.numbers+")'>修改</button>"+
						                  "</td>"+
						                "</tr>");
			});	
		}
	}
})
  	
  	
//分页
$('#example2').DataTable({
  "paging": true,
  "lengthChange": false,
  "searching": false,
  "ordering": true,
  "info": true,
  "autoWidth": false
});
    
    
});

//添加员工
function InsStaff(){
	var name = $("#name").val();
	var numbers = $("#numbers").val();
	var password = $("#password").val();
	var pid = $("#PostList").val();
	
	var numbe = /^[0-9]{5,8}$/; //员工账号
	if(!numbe.test(numbers)){
		alert("账号只能是 6 到 10 位之间的数字");
	}
	
	if(pid == 0){
		alert("请选择职位");
	}else{
	    $.ajax({
			type:"post",
			url:"http://127.0.0.1:8075/InsStaff",
			xhrFields:{withCredentials: true},
			crossDomain: true,
			dataType:"json",
			data:{"name":name,"numbers":numbers,"password":"password","pid":pid},
			success:function(msg){
				if(msg == 1){
					alert("添加成功");
					location.reload();
				}else{
					alert("该账号已经存在");
				}
			}
	    });			
	}
	

	
	
}

//删除员工
function DelStaff(numbers){
	alert("辞退员工"+numbers)
    $.ajax({
		type:"post",
		url:"http://127.0.0.1:8075/DelStaff",
		xhrFields:{withCredentials: true},
		crossDomain: true,
		dataType:"json",
		data:{"numbers":numbers},
		success:function(msg){
			if(msg!=0){
				alert("删除成功！  ");
				location.reload();
			}else{
				alert("删除失败！");
			}
			location.reload();
		}
    });
	
}

var staff = null;
//根据账号查询员工信息
function UpdStaff(numbers){
    $.ajax({
		type:"post",
		url:"http://127.0.0.1:8075/getbyidStaff",
		xhrFields:{withCredentials: true},
		crossDomain: true,
		dataType:"json",
		data:{"numbers":numbers},
		success:function(msg){
			staff = msg;
			$("#name").val(msg.name);
			$("#numbers").val(msg.numbers);
			$("#password").val(msg.password);
			$("#sid").val(msg.sid);
		}
    });
}

//修改员工
function UpdateStaff(){
	var name = $("#name").val();
	var numbers = $("#numbers").val();
	var password = $("#password").val();
	var pid = $("#PostList").val();
	var sid = $("#sid").val();
	
	if(pid == 0){pid = staff.pid;}
    $.ajax({
		type:"post",
		url:"http://127.0.0.1:8075/UpdStaff",
		xhrFields:{withCredentials: true},
		crossDomain: true,
		dataType:"json",
		data:{"name":name,"numbers":numbers,"password":password,"pid":pid,"sid":sid},
		success:function(msg){
			if(msg == 0 ){
				alert("不能修改账号");
			}else if(msg == 404){
				alert("修改失败！");
			}else if(msg == 1){
				alert("修改成功！");
				location.reload();
			}
			
		}
    });
    
    
}


//根据 ID 查询员工
function getByidStaff(){
	var numbers = $("#getNumbers").val();
	if(numbers !="" ){
	    $.ajax({
			type:"post",
			url:"http://127.0.0.1:8075/getbyidStaff",
			xhrFields:{withCredentials: true},
			crossDomain: true,
			dataType:"json",
			data:{"numbers":numbers},
			success:function(n){
		        $("#UserTable").replaceWith("<tbody id='UserTable'></tbody>");       
				$("#UserTable").append("<tr>"+
						                  "<td>"+n.name+"</td>"+
						                  "<td>"+n.numbers+"</td>"+
						                  "<td>"+n.password+"</td>"+
						                  "<td>"+n.pname+"</td>"+
						                  "<td>"+
						                  	"<button class='btn btn-primary' onclick='DelStaff("+n.numbers+")'>删除</button>&nbsp&nbsp"+
						                  	"<button class='btn btn-primary' onclick='UpdStaff("+n.numbers+")'>修改</button>"+
						                  "</td>"+
						                "</tr>");
			},
			error:function(){
				StaffList();
			}
	    });	
		
	}else{
		StaffList();
	}
}
	
//查询所有的   员工	
function StaffList(){
	    $.ajax({
		type:"post",
		url:"http://127.0.0.1:8075/SelectStaff",
		xhrFields:{withCredentials: true},
		crossDomain: true,
		dataType:"json",
		success:function(msg){
			$("#UserTable").replaceWith("<tbody id='UserTable'></tbody>");
			$.each( msg, function(i, n){
				$("#UserTable").append("<tr>"+
						                  "<td>"+n.name+"</td>"+
						                  "<td>"+n.numbers+"</td>"+
						                  "<td>"+n.password+"</td>"+
						                  "<td>"+n.pname+"</td>"+
						                  "<td>"+
						                  	"<button class='btn btn-primary' onclick='DelStaff("+n.numbers+")'>删除</button>&nbsp&nbsp"+
						                  	"<button class='btn btn-primary' onclick='UpdStaff("+n.numbers+")'>修改</button>"+
						                  "</td>"+
						                "</tr>");
			});		
		}
	})	
}

</script>




</html>
